<main class="main">
  <nz-spin
    nzSimple
    *ngIf="commonService.sliceMax === 0"
    class="position-center !z-50 mt-24"
  />
  <app-sidebar />

  <div class="inner-layout dark-bg">
    <app-swiper
      *ngIf="commonService.settings().sideThemeImages.length > 0"
      [images]="commonService.settings().sideThemeImages"
      [autoplay]="commonService.settings().sideThemeAutoplay"
      [height]="commonService.settings().sideThemeHeight"
    />
    <app-search />
    <component-group />
    <div class="px-2.5">
      <app-web-list [search]="false" [overflow]="true" [iconSize]="35" />
    </div>

    <div class="content" id="content">
      <div
        class="sticky top-0 left-0 z-10"
        *ngIf="commonService.currentList.length > 1"
      >
        <app-class-tabs [data]="commonService.currentList" />
      </div>
      <div class="box">
        <div *ngIf="commonService.currentList.length > 0; else noData">
          <div
            *ngFor="
              let item of commonService.currentList.slice(
                0,
                commonService.sliceMax
              );
              let i = index;
              trackBy: commonService.trackByItem
            "
          >
            <div class="nav-wrapper">
              <app-toolbar-title
                [dataSource]="item"
                (onCollapse)="commonService.onCollapse(item)"
              />

              <div
                [class.hidden]="item['collapsed']"
                [ngClass]="{
                  'grid gap-x-4 gap-y-3 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-4':
                    commonService.settings().sideCardStyle !== 'icon',
                  'flex flex-wrap gap-x-6 gap-y-4':
                    commonService.settings().sideCardStyle === 'icon',
                  '2xl:grid-cols-6':
                    commonService.settings().sideCardStyle === 'original' ||
                    commonService.settings().sideCardStyle === 'example',
                }"
              >
                <app-card
                  *ngFor="
                    let el of item.nav;
                    trackBy: commonService.trackByItemWeb
                  "
                  [cardStyle]="commonService.settings().sideCardStyle"
                  [dataSource]="el"
                  class="column-border"
                />
              </div>
            </div>
          </div>
        </div>

        <ng-template #noData>
          <app-no-data />
        </ng-template>
      </div>
    </div>

    <app-footer
      className="side-footer"
      [content]="commonService.settings().sideFooterHTML"
    />
  </div>
</main>

<app-fixbar
  (onCollapse)="commonService.onCollapseAll($event)"
  [collapsed]="commonService.collapsed"
/>
